<template>
  <div>
    <!-- <RefStateDemo v-if="showSonRef"></RefStateDemo> -->
    <!-- <StateToResDemo></StateToResDemo> -->
    <!-- <StateToResDemo2></StateToResDemo2> -->
    <!-- <ScriptSetup v-if="showSonRef"></ScriptSetup> -->
    <!-- <mouse-position v-if="showSonRef"></mouse-position> -->
    <!-- <Requester v-if="showSonRef"></Requester> -->
    <!-- <Parent v-if="showSonRef"></Parent> -->
    <!-- <GrandParent v-if="showSonRef"></GrandParent> -->

    <DirectiveDemo v-if="showSonRef"></DirectiveDemo>
  </div>

  <!-- msg是一个props还是一个普通的attribute 完全取决于HelloWorld组件有木有将其声明为一个props -->
  <!-- <HelloWorld msg="Vite + Vue" class="nimei" abc="abcnidetou"/> -->

  <hr />
  <button @click="showSonRef = !showSonRef">显隐子组件</button>
</template>

<!-- 主要在代码最外层的东东 直接对模板暴露 -->
<script setup>
// import HelloWorld from './components/HelloWorld.vue'
import RefStateDemo from "./components/RefStateDemo.vue";
import StateToResDemo from "./components/StateToResDemo.vue";
import StateToResDemo2 from "./components/StateToResDemo2.vue";
import MousePosition from "./components/MousePosition.vue";
import Requester from "./components/Requester.vue";
import Parent from "./components/Parent.vue";
import GrandParent from "./components/GrandParent.vue";
import DirectiveDemo from "./components/DirectiveDemo.vue";

import { ref } from "vue";

// 代码最外层的任何东东（组件+变量+函数+响对+响值...）直接对模板暴露
import ScriptSetup from "./components/ScriptSetup.vue";

// 代码最外层的任何东东（组件+变量+函数+响对+响值...）直接对模板暴露
const showSonRef = ref(true);
</script>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
